<template>
    <div class="conbox designs">
        <div class="casedes_fooetr" @click="toChat">
			<span class="foter_icon">1</span>
			<img class="footer_img" :src="userimg" alt />
			快速咨询
        </div>
        <uni-popup ref="popup" :show="consult" class="modules">
            <div class="person_link">
                <a class="closemask" @click="closemask()">
                    <img :src="`${constant.imgUrl}design/addfriclose.png`" alt />
                </a>
                <div class="plink_body">
                    <div class="plink_head">
                        <div class="plink_user">
                            <img :src="userimg" alt class="usersimg" />
                            <img :src="`${constant.imgUrl}publicicon/icon_personau.thenpng.png`" alt class="person_img" />
                        </div>
                        <div class="plink_right">
                            <p>{{username}}</p>
                            <p>
                                <span class="service_num">已服务{{prebook_count}}名业主</span>
                                <span>|</span>
                                <span>{{ userInfo.role_name }}</span>
                                <span>|</span>
                                {{working_years}}年经验
                            </p>
                            <p>{{motto}}</p>
                        </div>
                    </div>
				<img :src="`${constant.imgUrl}publicicon/ixon_servicedev.png`" alt class="icon_service" />
                    <div class="plink_btom">
                        <a @click="addweichat()">
                            <img :src="`${constant.imgUrl}design/weichat.png`" alt />
                            <span>添加微信</span>
                        </a>
                        <a :href="'tel:'+phone">
                            <img :src="`${constant.imgUrl}design/telep.png`" alt />
                            <span>拨打电话</span>
                        </a>
                    </div>
                </div>
            </div>
        </uni-popup>
        <v-addWechat ref="addWechat"></v-addWechat>
    </div>
</template>

<script>
import AddWechat from '@/pages/components/addWechat'
import { jumpToChat } from '@/utils/common'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import { getBasicUserApi } from '@/api/system'
export default {
	name: 'Conversation',
	data() {
		return {
			consult: false,
			addfriend: false,
			weixinid: 'PG8858',
			userimg: '',
			wechat: '',
			phone: '',
			username: '',
			address: '',
			rolename: '',
			motto: '',
			weqcode: '',
			working_years: 0,
			prebook_count: 0,
			userid: '',
			query: null,
			userInfo: {},
			constant: this.$constant
		}
	},
	components: {
		'v-addWechat': AddWechat,
		uniPopup
	},
	mounted() {
		this.query = getCurrentPages()[0].options
		this.getbasedata()
	},
	methods: {
		getbasedata() {
			let data = { owner_user_id: this.query.owner_user_id }
			getBasicUserApi(data).then(response => {
				if (response.status == 'success') {
					var list = response.data
					var area = list.address
					this.username = list.nick_name
					this.userimg = list.user_picture
					this.wechat = list.wechat_number
					this.phone = list.contact_phone
					this.address = area
					this.rolename = list.role_name
					this.motto = list.motto
					this.weqcode = list.wechat_qrcode || `${this.constant.imgUrl}common/null_qr_code.png`
					this.working_years = list.working_years
					this.prebook_count = list.count_data.totalVistor

					this.userInfo = list
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		contact() {
			// 快捷咨询点击
			this.consult = true
		},
		addweichat() {
			// 添加微信事件
			this.consult = false
			this.$refs.addWechat.show()
			// this.addfriend = true
		},
		closemask() {
			// 关闭弹框
			this.consult = false
			this.addfriend = false
			this.catalog = false
		},
		// 去联系客服
		toChat() {
			if (this.userInfo.role_id == 1 || this.userInfo.role_id == 2) {
				jumpToChat()
			} else {
				this.addwefriend()
			}
		}
	}
}
</script>

<style scoped lang="scss">
.modules {
    top: 77%;
    border-radius: 20px 20px 0 0;
}
.casedes_fooetr{
	background: white !important;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	font-size: 32px;
	& .footer_img{
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 10px;
	}
}
.foter_icon {
    width: 34px;
    height: 34px;
    position: absolute;
    text-align: center;
    line-height: 34px;
    border-radius: 50%;
    background: -webkit-linear-gradient(rgb(255, 4, 0), rgb(255, 58, 123));
    font-size: 22px;
	right: -34px;
	top: -5px;
    color: white;
}
</style>
